<template>
  <shadowAnimated :sm-size="5" :interval="3000">
    <div class="wrapper">
      <div :key="index" v-for="(item,index) in data" class="item">
        <div class="bar-title" :style="{width:item.width?item.width+'px':'45px'}">{{item.title}}</div>
        <div class="bar-wrapper">
          <div class="bar-data" :style="{width:item.data+'%'}">

          </div>
        </div>
        <div class="bar-info">
            {{item.data}}%
        </div>
      </div>
    </div>
  </shadowAnimated>
</template>
<script>
  import shadowAnimated from '@/components/shadow-animated';

  export default {
    data() {
      return {};
    },
    props: {
      data: Array,
    },
    components: {shadowAnimated}
  };
</script>
<style lang="less" scoped>
  .wrapper {
    background-color: rgba(0, 0, 0, 0.3);
    padding: 8px;

    .item {
      display: flex;
      flex-direction: row;
      .bar-title {
        flex: none;
        color: orange;
        font-size: 13px;
        line-height: 24px;
      }
      .bar-info{
        margin-top: 5px;
        width: 50px;
        text-align: right;
        color: rgba(255,255,255,0.7);
        font-size: 12px;
      }
      .bar-wrapper {
        flex: auto;
        height: 10px;
        margin-top: 8px;
        background-color: rgba(54, 192, 206, 0.1);
        .bar-data {
          height: 10px;
          background-color: rgba(54, 192, 206, 1);
          transition: width 0.7s ease;
        }

      }
    }
  }
</style>
